前言

使用Vue.js都開始都是建立一個Vue實例

new Vue({
    el : "#root",
    data : {
        key : 'value',
        data2 : {
            key : 'value2'
        }
    }
})

• el：捉取的容器
• data：獲取的資料
  以下介紹如何用Vue獲取數據

差值語法

<div id="root">
    <h1>{{key}}<h1>
    <h1>{{key.toUpperCase()}}<h1>
    <h1>{{Date.now()}}<h1>
    <h1>{{data2.key}}<h1>
</div>

若不使用vue指令獲取數據的話
會使用 {{ }} 獲取data中的數據
除此之外也可以搭配javaScrit中可用的方法

另外若data中包了多層數據
在獲取中從最外層開始抓取也能獲取內層的數據

指令語法

v-bind:

v-bind為單向數據綁定
在使用上只能獲取數據
並不能更改data中的數據

但如果異動了data中的數據
v-bind捕捉的數據vue會立即重新解析模板
將新數據更新在頁面上

<div id="root">
    <input type="text" v-bind:value="key" >
    <!-- v-bind:value="xxx" 可以簡寫成 :value="xxx" -->
    <a v-bind:href="data.key" ></a>
</div>

使用v-bind: + 標籤指令
可以捉取data中的數據並且搭配接受到的標籤指令
除此之外跟差值語法一樣
可以使用function()

v-model:

v-model跟v-bind的差別在於數據流向
v-model是雙向綁定
所以異動到v-model中綁定的數據
Vue.data的數據也會跟著異動(通常使用於input select...)

<div id="root">
    <input type="text" v-model="key" />
</div>

v-model 默認捕捉value的數據 所以不用特別標示補著的標籤指令

若今天使用上了v-model和v-bind 並且捕捉了相同的數據
那在v-model更改數據後 v-bind也會同步更新**

使用v-model可以搭配的方法

• v-model.lazy ：輸入匡失去焦點在捉取數據
• v-model.number：將輸入匡的數據轉為數字
• v-model.trim ：將輸入匡的數據前後移除空白

以上就是數據綁定的說明